<div>
    <div class="l-compact-form has-local-controls l-widget-rule s-widget-rule">
        <div class="widget-rule-header">
            <span class="flex-elem l-widget-thumb-wrapper">
                <span class="grippy-holder">
                    <span class="t-grippy grippy local-control local-controls-hidden"></span>
                </span>
                <span class="view-control expanded"></span>
                <span class="t-widget-thumb widget-thumb">
                    <span class="widget-label">DEF</span>
                </span>
            </span>
            <span class="flex-elem rule-title">Default Title</span>
            <span class="flex-elem rule-description grows">Rule description goes here</span>
            <span class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
                <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
                <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
            </span>
        </div>
        <div class="widget-rule-content expanded">
            <ul>
                <li>
                    <label>Rule Name:</label>
                    <span class="controls">
                        <input class="t-rule-name-input" type="text" />
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Label:</label>
                    <span class="controls t-label-input">
                        <input class="e-control t-rule-label-input" type="text" />
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Message:</label>
                    <span class="controls">
                        <input type="text" class="lg s t-rule-message-input"
                         placeholder="Will appear as tooltip when hovering on the widget"/>
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Style:</label>
                    <span class="controls t-style-input">
                    </span>
                </li>
            </ul>
            <ul class="t-widget-rule-config">
                <li>
                    <label>Trigger when</label>
                    <span class="controls">
                        <div class="e-control select">
                            <select class="t-trigger">
                                <option value="any">any condition is met</option>
                                <option value="all">all conditions are met</option>
                            </select>
                         </div>
                    </span>
                </li>
                <li>
                    <label></label>
                    <span class="controls">
                        <a class="e-control s-button labeled add-condition icon-plus">Add Condition</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="t-drag-indicator l-widget-rule s-widget-rule" style="opacity:0;" hidden></div>
</div>
